<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


    <style type="text/css">
        @keyframes yuying1{
            0%{
                height: 0%;
            }
            20%{
                height: 50%;
            }
            50%{
                height: 100%;
            }
            80%{
                height: 50%;
            }
            100%{
                height: 0%;
            }
        }	

        #container{
            width: 260px;
            height: 50px;
            margin: 200px auto;	
        }
        #container #one{
            animation:yuying1 1s infinite 0.1s;
           -webkit-animation:yuying1 0.6s infinite 0.1s;
        }
        #container #two{
            animation:yuying1 1s infinite 0.2s;
           -webkit-animation:yuying1 0.6s infinite 0.2s;
        }
        #container #three{
            animation:yuying1 1s infinite 0.3s;
           -webkit-animation:yuying1 0.6s infinite 0.3s;
        }
        #container #four{
            animation:yuying1 1s infinite 0.4s;
           -webkit-animation:yuying1 0.6s infinite 0.4s;
        }
        #container #five{
            animation:yuying1 1s infinite 0.5s;
           -webkit-animation:yuying1 0.6s infinite 0.5s;
        }
        #container #six{
            animation:yuying1 1s infinite 0.1s;
           -webkit-animation:yuying1 0.6s infinite 0.1s;
        }
        #container #seven{
            animation:yuying1 1s infinite 0.2s;
           -webkit-animation:yuying1 0.6s infinite 0.2s;
        }
        #container #eight{
            animation:yuying1 1s infinite 0.3s;
           -webkit-animation:yuying1 0.6s infinite 0.3s;
        }
        #container #nine{
            animation:yuying1 1s infinite 0.4s;
           -webkit-animation:yuying1 0.6s infinite 0.4s;
        }
        #container #ten{
            animation:yuying1 1s infinite 0.5s;
           -webkit-animation:yuying1 0.6s infinite 0.5s;
        }
        #one,#two,#three,#four,#five,#six,#seven,#eight,#nine,#ten{
            width:6px;
            height: 100%;
            margin-left: 10px;
            border-radius: 50px;
            background-color: #999;
            vertical-align: middle;
            display: inline-block;
        }
  
    </style>
      </head>
    <body>
          <div id="container">
			<div id="one"></div>
			<div id="two"></div>
			<div id="three"></div>
			<div id="four"></div>
            <div id="five"></div>
            <div id="six"></div>
			<div id="seven"></div>
			<div id="eight"></div>
			<div id="nine"></div>
			<div id="ten"></div>
		</div>
</body>
</html>